VChart 1.13.0
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=48-How to customize the position and offset of the tooltip in the chart——VisActor/VChart FAQ documents!!!###!!!

How to customize the position and offset of the tooltip in the chart?

Question Description

When I use VChart charts, I encounter the problem that the chart tip box is very close to the mouse pointer, so that the mouse pointer may obscure the tips on a large screen with high resolution. Is there any way to solve this problem?

Solution

VChart already provides the corresponding function, you just need to set tooltip.offset in the spec of the chart. The corresponding configuration documents are available on the official website.

https://visactor.io/vchart/option/barChart#tooltip.offset

Code Example

spec.tooltip.offset = {
  x: 40,
  y: 40
};

Result

Demo: https://codesandbox.io/s/tooltip-offset-mns4gl?file=/src/index.ts

Quote

tooltip option：https://visactor.io/vchart/option/barChart#tooltip.offset

github：https://github.com/VisActor/VChart

Tooltip tutorials: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip

Tooltip demos:https://www.visactor.io/vchart/demo/tooltip/custom-mark-tooltip